<template>
	<view class="live-wx-list">
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50">
			<view class="list d-s-c f-w">
				<view class="item" v-for="(item, index) in listData" :key="index" @click="gotoLive(item)">
					<view class="pic pr">
						<text
							class="state"
							:class="{ bg101: item.liveStatus == 101, bg102: item.liveStatus == 102, bg103: item.liveStatus == 103 }"
							v-if="item.liveStatus == 101 || item.liveStatus == 102 || item.liveStatus == 103"
						>
							{{ convertStatus(item.liveStatus) }}
						</text>
						<image :src="item.coverImg" mode="aspectFit"></image>
					</view>
					<view class="p-20-0 text-ellipsis f28">{{ item.name }}</view>
				</view>
			</view>

			<!-- 没有记录 -->
			<view>
				<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无相关记录哦</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*底部加载*/
			loading: true,
			/*没有更多*/
			no_more: false,
			/*列表*/
			listData: [],
			/*一页多少条*/
			list_rows: 10,
			/*当前第几页*/
			last_page: 0
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	mounted() {
		this.init();
		this.getLive();
	} /*分享*/,
	onShareAppMessage() {
		let self = this;
		// 构建页面参数
		let params = self.getShareUrlParams();
		return {
			title: '直播列表',
			path: '/pagesPlus/live/wx?' + params
		};
	},
	methods: {
		/*初始化*/
		init() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					_this.scrollviewHigh = _this.phoneHeight;
				}
			});
		},

		convertStatus(num) {
			let str = '';
			switch (num) {
				case 101:
					str = '直播中';
					break;
				case 102:
					str = '未开始';
					break;
				case 103:
					str = '已结束';
					break;
				case 104:
					str = '禁播';
					break;
				case 105:
					str = '暂停';
					break;
				case 106:
					str = '异常';
					break;
				case 107:
					str = '已过期';
					break;
			}
			return str;
		},

		/*获取商品*/
		getLive() {
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			let page = self.page;
			let list_rows = self.list_rows;
			self.loading = true;
			self._postBody(
				'plus/live/wx/lists',
				{
					pageIndex: page || 1,
					pageSize: list_rows
				},
				function(res) {
					self.listData = self.listData.concat(res.data.records);
					self.last_page = res.data.lastPage;
					if (res.data.lastPage <= 1) {
						self.no_more = true;
					}
					self.loading = false;
				}
			);
		},

		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			self.bottomRefresh = true;
			self.page++;
			self.loading = true;
			if (self.page > self.last_page) {
				self.loading = false;
				self.no_more = true;
				return;
			}
			self.getData();
		},

		/*跳转详情页*/
		gotoLive(item) {
			let roomId = item.roomid;
			let customParams = {
				path: 'pages/index/index'
			};
			wx.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?roomId=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
			});
		}
	}
};
</script>

<style>
.live-wx-list .list {
	padding: 20rpx;
	background: #ffffff;
}
.live-wx-list .list .item {
	width: 345rpx;
	margin-right: 20rpx;
}
.live-wx-list .list .item:nth-child(2n + 0) {
	margin-right: 0;
}
.live-wx-list .list .item .pic {
	width: 340rpx;
	height: 340rpx;
}
.live-wx-list .list .item .pic .state {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	padding: 4rpx 8rpx;
	background: red;
	color: #ffffff;
	border-radius: 8rpx;
}
.live-wx-list .list .item .pic .state.bg101 {
	background: red;
}
.live-wx-list .list .item .pic .state.bg102 {
	background: #ffb100;
}
.live-wx-list .list .item .pic .state.bg103 {
	background: #333333;
}
.live-wx-list .list .item image {
	width: 340rpx;
	height: 340rpx;
	border-radius: 8rpx;
}
</style>
